<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import * as echarts from 'echarts'
import jzmj from '../../../../assets/imgs/ic_jzmj.png'
import { getPie3DOption } from '../../info-house-overview/left/getPie3DOption'
import {
  getHotCommunity,
  getDealInfo,
  getRentInfo
} from '../api'
import DotsTabs from '../../components/dotsTabs.vue'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const tableData = ref([])
const updateDataHotCommunity = (data) => {
  tableData.value = data.data
}

const exchangeInfoBarChartRef = ref(null)
const getBarChartOption_exchangeInfo = (data) => {
  return {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      top: 'middle',
      left: 'left',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 30,
      padding: [15, 4],
      orient: 'vertical',
      textStyle: {
        rich: {
          name: {
            color: '#bbdbf6',
            fontSize: 14,
            fontWeight: 'normal'
          },
          value: {
            color: '#b58a37',
            lineHeight: 30,
            fontSize: 16,
            fontWeight: 'bold'
          }
        }
      },
      formatter: function (name) {
        // 使用富文本格式
        return '{name|' + name + '} \n {value|' + data[name].reduce((a, b) => a + b, 0) + '}套';
      }
    },
    grid: {
      left: '30%',
      right: '4%',
      top: '3%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.xAxis, // ['武鸣', '兴宁', '江南', '青秀', '良庆', '邑宁', '西乡塘']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '上架总量',
        type: 'bar',
        // barWidth: barWidth,
        // label: {
        //   show: true
        // },
        itemStyle: {
          color: '#047dbd',
        },
        emphasis: {
          focus: 'series'
        },
        data: data['上架总量'], // [320, 302, 301, 334, 390, 330, 320]
      },
      {
        name: '成交总量',
        type: 'bar',
        // barWidth: barWidth,
        itemStyle: {
          color: '#b58a37',
        },
        emphasis: {
          focus: 'series'
        },
        data: data['成交总量'], // [120, 132, 101, 134, 90, 230, 210]
      }
    ]
  }
}
const updateDataDealInfo = (data) => {
  let cData = {
    xAxis: data.xAxis, // ['自持房量', '托管房量', '代管房量'],
    '上架总量': data.xAxis.map((name) => data[name][0]), // [320, 302, 301],
    '成交总量': data.xAxis.map((name) => data[name][1]), //[120, 132, 101],
  }
  exchangeInfoBarChartRef.value?.updateOption(getBarChartOption_exchangeInfo(cData))
}

const rentInfoOverview = ref([
  {
    title: '累计注册租赁企业',
    value: 1414,
    unit: '家'
  },
  {
    title: '累计网签备案',
    value: 960,
    unit: '套'
  },
  {
    title: '累计注册企业人员',
    value: 17772,
    unit: '人'
  },
  {
    title: '当前有效网签备案',
    value: 10790,
    unit: '套'
  }
])
const updateDataRentInfoOverview = (data) => {
  Object.entries(data).forEach(([key, value]) => {
    const one = rentInfoOverview.value.find((item) => item.title === key)
    one && (one.value = value)
  })
}
const rentInfoBarChartRef = ref(null)

const colors = [
  '#a1761b',
  '#ffe400',
  '#43cc00',
  '#d35e00',
  '#00bcde',
]
const getBarChartOption = (data) => {
  const barWidth = 7
  // '50平以下', '50-90平', '90-120平', '120-144平', '144平以上'
  return {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      top: 1,
      right: 0,
      itemWidth: 10,
      itemHeight: 10,
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: data.cityNames, // ['武鸣', '兴宁', '江南', '青秀', '良庆', '邑宁', '西乡塘']
    },
    series: data.reList.map((item, i) => {
      const [name, value] = Object.entries(item)[0]
      return {
        name,
        data: value,
        type: 'bar',
        stack: 'total',
        barWidth: barWidth,
        itemStyle: {
          normal: {
            color: colors[i],
          }
        },
      }
    })
    // [
    //   {
    //     name: '50平以下',
    //     type: 'bar',
    //     barWidth: barWidth,
    //     stack: 'total',
    //     // label: {
    //     //   show: true
    //     // },
    //     itemStyle: {
    //       normal: {
    //         color: '#a1761b',
    //       }
    //     },
    //     emphasis: {
    //       focus: 'series'
    //     },
    //     data: data['50平以下'], // [320, 302, 301, 334, 390, 330, 320]
    //   },
    //   {
    //     name: '50-90平',
    //     type: 'bar',
    //     barWidth: barWidth,
    //     stack: 'total',
    //     itemStyle: {
    //       normal: {
    //         color: '#ffe400',
    //       }
    //     },
    //     emphasis: {
    //       focus: 'series'
    //     },
    //     data: data['50-90平'], // [120, 132, 101, 134, 90, 230, 210]
    //   },
    //   {
    //     name: '90-120平',
    //     type: 'bar',
    //     barWidth: barWidth,
    //     stack: 'total',
    //     // label: {
    //     //   show: true
    //     // },
    //     itemStyle: {
    //       color: '#43cc00',
    //     },
    //     emphasis: {
    //       focus: 'series'
    //     },
    //     data: data['90-120平'], // [220, 182, 191, 234, 290, 330, 310]
    //   },
    //   {
    //     name: '120-144平',
    //     type: 'bar',
    //     barWidth: barWidth,
    //     stack: 'total',
    //     // label: {
    //     //   show: true
    //     // },
    //     itemStyle: {
    //       color: '#d35e00',
    //     },
    //     emphasis: {
    //       focus: 'series'
    //     },
    //     data: data['120-144平'], // [150, 212, 201, 154, 190, 330, 410]
    //   },
    //   {
    //     name: '144平以上',
    //     type: 'bar',
    //     barWidth: barWidth,
    //     showBackground: true,
    //     stack: 'total',
    //     // label: {
    //     //   show: true
    //     // },
    //     itemStyle: {
    //       color: '#00bcde',
    //     },
    //     emphasis: {
    //       focus: 'series'
    //     },
    //     data: data['144平以上'], // [820, 832, 901, 934, 1290, 1330, 1320]
    //   }
    // ]
  }
}

const updateChartBarRentInfo = (data) => {
  rentInfoBarChartRef.value?.updateOption(getBarChartOption(data))
}

const reqRentInfo = () => {
  getRentInfo({ type: activeTabName.value })
    .then((res) => {
      updateDataRentInfoOverview(res.data)
      updateChartBarRentInfo(res.data)
    })
}

const activeTabName = ref('各城区房源面积')

const tabList = ref([
  {
    name: '各城区房源面积'
  },
  {
    name: '各城区租金均价'
  }
])
const onChangeTab = (activeName) => {
  activeTabName.value = activeName
  reqRentInfo()
}

const reqData = () => {
  activeTabName.value = '各城区房源面积'
  Promise.all([
    getHotCommunity(),
    getDealInfo(),
    getRentInfo({ type: activeTabName.value }),
  ]).then(([gotCommunityResult, dealInfoResult, rentInfoResult]) => {
    if (gotCommunityResult) {
      updateDataHotCommunity(gotCommunityResult.data)
    }
    if (dealInfoResult.success) {
      updateDataDealInfo(dealInfoResult.data)
    }
    if (rentInfoResult.success) {
      updateDataRentInfoOverview(rentInfoResult.data)
      updateChartBarRentInfo(rentInfoResult.data)
    }
  })
}

onMounted(() => {
  reqData()
})

onUnmounted(() => {})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="房源统计" class="total-card">
      <div class="section">
        <div class="section-title">＞ 热门小区</div>
        <div class="table-wrap">
          <div class="table-prev-sell">
            <el-scrollbar style="height: 200px;">
              <div class="tr th">
                <div class="no td">小区名称</div>
                <div class="name td">累计上架</div>
                <div class="time td">本周上架</div>
                <div class="time td">上周上架</div>
              </div>
              <div class="tr" v-for="(item, index) in tableData" :key="index">
                <div class="no td">
                  <el-tooltip :content="item.park_name"  placement="top" effect="light">
                    {{ item.park_name }}
                  </el-tooltip>
                </div>
                <div class="name td">
                  <el-tooltip :content="String(item.total)"  placement="top" effect="light">
                    {{ item.total }}
                  </el-tooltip>
                </div>
                <div class="time td">
                  <el-tooltip :content="String(item.current_week_count)"  placement="top" effect="light">
                    {{ item.current_week_count }}
                  </el-tooltip>
                </div>
                <div class="area td">
                  <el-tooltip :content="String(item.last_week_count)"  placement="top" effect="light">
                    {{ item.last_week_count }}
                  </el-tooltip>
                </div>
              </div>

              <div class="no-data" v-if="!tableData.length">暂无数据</div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="section-title">＞ 成交信息</div>

        <div class="chart">
          <draw-echarts
            ref="exchangeInfoBarChartRef"
            width="420"
            height="160"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>

      <div class="section">
        <div class="section-title">＞ 租赁信息</div>
        <div class="overview-wrap">
          <div class="overview-box" v-for="(item, i) in rentInfoOverview">
            <div class="bg"></div>
            <div>
              <span class="overview-value">{{ item.value }}</span>
              <span class="overview-unit">{{ item.unit }}</span>
            </div>
            <div class="overview-title">{{ item.title }}</div>
          </div>
        </div>
        <DotsTabs :tab-list="tabList" v-model:activeName="activeTabName" @change="onChangeTab" />
        <div class="chart">
          <draw-echarts
            ref="rentInfoBarChartRef"
            width="420"
            height="220"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .total-card {
    height: 100%;

    .section-title {
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10px;
    }

    .overview-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 10px;

      .overview-box {
        position: relative;
        margin-bottom: 10px;
        width: 43%;
        height: 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        padding-left: 30px;

        .bg {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, #044e79 0%, #063254 50%, #081a34 100%);
          transform: skew(-24deg);
          border-left: solid 3px #02afc5;
        }
        // background-image: url(/src/assets/imgs/house_rent_bg.png);
        // background-repeat: no-repeat;
        // background-size: 100% 100%;

        .overview-value {
          position: relative;
          font-size: 16px;
          font-weight: bold;
          color: #fff;
        }
        .overview-unit {
          position: relative;
          font-size: 14px;
          color: #aaa;
        }
        .overview-title {
          position: relative;
          margin-top: 4px;
          font-size: 14px;
          color: #bbb;
        }
      }
    }

  }

  .table-wrap {
    color: #ffffff;
    
    .tr {
      display: flex;
      height: 32px;
      line-height: 32px;
      .td {
        flex: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        padding: 0 4px;
      }
      .no {
        flex: 3;
      }
    }
    .th {
      color: #bbdbf6;
    }
    .tr:nth-child(odd) {
      background-color: #1c2d4c;
    }
    .tr:nth-child(even) {
      background-color: #08142d;
    }

    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 3;
      color: #B9D9F4;
    }
  }

  .my-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbdbf6;
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;

    .dots {
      display: flex;
      align-items: center;
      gap: 5px;
      i {
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 3px;
        background: #bbdbf6;
      }
    }

    .tabs {
      display: flex;
    }

    .tab-item {
      position: relative;
      cursor: pointer;
      padding: 0 6px;
      margin: 0 6px;
      font-size: 13px;
    }
    .tab-item::before {
      content: '';
      position: absolute;
      width: 2px;
      height: 0.7em;
      right: -7px;
      top: 12px;
      background-color: #ffffff;
    }
    .tab-item:last-child::before {
      display: none;
    }
    .tab-item.on {
      color: #f8ea9a;
    }
    .tab-item.on::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,rgba(248, 234, 154, 0.01), rgba(248, 234, 154, 0.4), rgba(248, 234, 154, 0.01));
    }
  }
}
</style>
